<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue-ls Synchronized counter example</title>
</head>
<body>
    <h1>Synchronized tab counter</h1>
    <div id="app">
      localStorage: <span id="count">{{localCounter}}</span> <br>
      sessionCounter: {{sessionCounter}}
      <div>
        <button id="increment" type="button" @click="increment()">Increment</button>
        <button id="decrement" type="button" @click="decrement()">Decrement</button>
      </div>
    </div>


    <script type="text/javascript" src="https://unpkg.com/vue@2.2.1"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
    <script type="text/javascript" src="../../dist/vue-ls.js"></script>
    <script type="text/javascript">
      Vue.use(_.clone(VueStorage), {
        name: 'ss',
        storage: 'session',
      });

      Vue.use(_.clone(VueStorage), {
        name: 'ls',
        storage: 'local',
      });

      new Vue({
        el: '#app',
        data: function() {
          return {
            localCounter: 0,
            sessionCounter: 0,
          };
        },
        watch: {
          localCounter: function(val) {
            this.$ls.set('localCounter', val)
          },
          sessionCounter: function(val) {
            this.$ss.set('sessionCounter', val)
          }
        },
        created: function() {
          this.localCounter = this.$ls.get('localCounter', 0);
          var _this = this;
          this.$ls.on('localCounter', function(val) {
            _this.localCounter = val;
          });

          this.sessionCounter = this.$ss.get('sessionCounter', 0);
          var _this = this;
          this.$ss.on('sessionCounter', function(val) {
            _this.sessionCounter = val;
          });
        },
        methods: {
          increment: function() {
            this.localCounter++;
            this.sessionCounter++;
          },

          decrement: function() {
            this.localCounter--;
            this.sessionCounter--;
          }
        }
      });

    </script>
</body>
</html>
